<template>
	<view class="address">
		<view class="row">
			<view class="label">收件人</view>
			<view class="value"><input type="text" placeholder="请输入收件人姓名" v-model="addressInfo.name" /></view>
		</view>
		<view class="row">
			<view class="label">电话号码</view>
			<view class="value"><input type="number" placeholder="请输入电话号码" v-model="addressInfo.phoneNumber" /></view>
		</view>
		<view class="row">
			<view class="label">所在地区</view>
			<view class="value" @tap="openAddress">{{ cityInfo.label ? cityInfo.label : '请选择地址' }}</view>
		</view>
		<view class="row">
			<view class="label">详情地址</view>
			<view class="value"><input type="text" placeholder="详情地址" v-model="addressInfo.detailAddress" /></view>
		</view>
		<view class="row">
			<view class="label">设置默认地址</view>
			<view class="value">
				<view class="switch"><switch :checked="addressInfo.defaultStatus == 1" @change="switchChange" color="" /></view>
			</view>
		</view>
		<view class="delBtn" @tap="delAddress" v-if="isEdit">删除收货地址</view>
		<view class="saveBtn" @tap="handleSave">保存</view>
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#435950"></simple-address>
	</view>
</template>

<script>
import { addAddressInfo, updateAddressInfo, delAddressInfo } from '../../../../api/mine/addressmanage/index.js';
import WxValidate from '../../../../utils/WxValidate.js';
export default {
	data() {
		return {
			isEdit: false, // 是否是编辑模式
			cityPickerValueDefault: [0, 0, 1],
			cityInfo: {}, // 地址选择框数据
			addressInfo: {
				name: '',
				phoneNumber: '',
				detailAddress: '',
				defaultStatus: 0
			},
			id: '' // 地址id
		};
	},
	methods: {
		async getAddressInfo() {
			const res = await addAddressInfo({
				...this.addressInfo,
				city: this.cityInfo.labelArr[1],
				cityCode: this.cityInfo.provinceCode + this.cityInfo.cityCode + this.cityInfo.areaCode,
				id: this.id,
				province: this.cityInfo.labelArr[0],
				region: this.cityInfo.labelArr[2]
			});
			console.log('res:', res);
		},
		// 打开地址选择弹窗
		openAddress() {
			if (this.isEdit) {
				var index = this.$refs.simpleAddress.queryIndex(this.cityInfo.label.split('-'), 'label');
				console.log(index);
				this.cityPickerValueDefault = index.index;
			}
			this.$refs.simpleAddress.open();
		},
		onConfirm(e) {
			console.log(e);
			this.cityInfo = e;
		},
		switchChange(e) {
			console.log(e);
			this.addressInfo.defaultStatus = e.detail.value ? 1 : 0;
		},
		// 保存地址
		async handleSave() {
			if (!this.cityInfo.labelArr) {
				uni.showToast({
					title: '请选择地址',
					icon: 'none'
				});
				return;
			}
			let submitObj = {
				...this.addressInfo,
				city: this.cityInfo.labelArr[1] || '',
				cityCode: this.cityInfo.provinceCode + ',' + this.cityInfo.cityCode + ',' + this.cityInfo.areaCode,
				id: this.id,
				province: this.cityInfo.labelArr[0] || '',
				region: this.cityInfo.labelArr[2] || ''
			};
			if (!this.WxValidate.checkForm(submitObj)) {
				let error = this.WxValidate.errorList[0];
				uni.showToast({
					title: error.msg,
					icon: 'none'
				});
				return;
			}
			let res = {};
			if (this.isEdit) {
				res = await updateAddressInfo(submitObj);
			} else {
				res = await addAddressInfo(submitObj);
			}
			const text = this.isEdit ? '保存' : '新增';
			uni.showToast({
				title: res.success ? `${text}地址成功` : `${text}地址失败`,
				icon: 'none'
			});
			if (res.success) {
				uni.navigateBack({
					delta: 1
				});
			}
		},
		// 删除
		async delAddress() {
			const { success } = await delAddressInfo(this.id);
			if (success) {
				uni.showToast({
					title: '删除成功'
				});
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				});
			}
		},
		// 表单校验
		initValidate() {
			let rules = {
				name: {
					required: true,
					maxlength: 10
				},
				phoneNumber: {
					required: true,
					tel: true
				},
				detailAddress: {
					required: true
				}
			};

			let message = {
				name: {
					required: '请输入姓名',
					maxlength: '名字不能超过10个字'
				},
				phoneNumber: {
					required: '请输入手机号码',
					tel: '请输入正确的手机号码'
				},
				detailAddress: {
					required: '请输入详细地址'
				}
			};
			//实例化当前的验证规则和提示消息
			this.WxValidate = new WxValidate(rules, message);
		}
	},
	onLoad(options) {
		const id = options.id;
		this.id = id;
		if (options.id) {
			this.isEdit = true;
			const addressList = uni.getStorageSync('addressList');
			const currentAddr = addressList.find(item => item.id == id);
			this.addressInfo = currentAddr;
			this.cityInfo.label = `${currentAddr.province}-${currentAddr.city}-${currentAddr.region}`;
			this.cityInfo.labelArr = [currentAddr.province, currentAddr.city, currentAddr.region];
		}

		uni.setNavigationBarTitle({
			title: this.isEdit ? '编辑地址' : '新增地址'
		});
		// 初识化表单校验对象
		this.initValidate();
	}
};
</script>

<style lang="scss" scoped>
.address {
	padding: 0 20rpx;
	.row {
		display: flex;
		height: 120rpx;
		line-height: 120rpx;
		border-bottom: 1rpx solid #ccc;
		.label {
			width: 210rpx;
			font-size: 30rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.value {
			flex: 1;
			height: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			input {
				height: 100%;
			}
			.switch {
				display: flex;
				justify-content: flex-end;
			}
		}
	}
	.delBtn {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 60rpx;
		text-align: center;
		color: #fff;
		background-color: #e64340;
		border-bottom: solid 0.5px #eee;
	}
	.saveBtn {
		color: #fff;
		font-size: 30rpx;
		height: 80rpx;
		width: 520rpx;
		margin: 300rpx auto 0;
		text-align: center;
		line-height: 80rpx;
		border-radius: 80rpx;
		background-color: #354e44;
	}
}
</style>
